<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>采购明细管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!---头部导航栏-->
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black"> <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">小药店管理平台</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">前台页面</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="/Users/chenminggang/Downloads/20200829200211_enkci.jpg" class="layui-nav-img" >
                    叮无缝
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">文件</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="javascript:;">登出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <!---菜单导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">采购管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="./gongyingshangxinxi.html">供应商信息管理</a></dd>
                        <dd><a href="./yaopinxinxi.html">药品信息管理</a></dd>
                        <dd><a href="./caigoudan.html">采购单添加</a></dd>
                        <dd class="layui-this"><a href="javascript:;">采购明细管理</a></dd>
                    </dl>
                </li>
                <!-- 其他菜单项 -->
            </ul>
        </div>
    </div>

    <!---内容-->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                首页 / 采购管理 / 采购明细管理
            </blockquote>
            <table id="purchaseDetailsTable" lay-filter="purchaseDetails"></table>
        </div>
    </div>

    <!---底部导航栏-->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<!-- 添加采购明细的弹出层表单 -->
<div id="addPurchaseDetail" style="display:none;">
    <form id="addPurchaseDetailForm" class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">药品类别</label>
            <div class="layui-input-block">
                <select name="category" required lay-verify="required">
                    <option value="">请选择药品类别</option>
                    <!-- 动态加载药品类别 -->
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">药品</label>
            <div class="layui-input-block">
                <select name="medicine" required lay-verify="required">
                    <option value="">请选择药品</option>
                    <!-- 根据药品类别动态加载药品 -->
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">采购数量</label>
            <div class="layui-input-block">
                <input type="number" name="quantity" required lay-verify="required" placeholder="请输入采购数量" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addDetail">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="../../layui/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util', 'table', 'form'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        // 初始化表格
        table.render({
            elem: '#purchaseDetailsTable',
            url: '/purchaseDetails', // 模拟接口，实际需要替换为后端接口
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'orderNumber', title: '采购单号'},
                {field: 'medicineName', title: '药品名称'},
                {field: 'quantity', title: '采购数量'},
                {field: 'remarks', title: '备注'},
                {title: '操作', templet: '#operationTpl'}
            ]],
            page: true
        });

        // 监听添加采购明细按钮
        $('#addPurchaseDetailBtn').on('click', function() {
            layer.open({
                type: 1,
                title: '添加采购明细',
                content: $('#addPurchaseDetail').html(),
                area: ['600px', '400px'],
                success: function(layero, index) {
                    // 初始化药品类别下拉框
                    $.ajax({
                        url: '/medicineCategories', // 模拟接口，实际需要替换为后端接口
                        type: 'GET',
                        success: function(res) {
                            var options = '<option value="">请选择药品类别</option>';
                            res.data.forEach(function(category) {
                                options += '<option value="' + category.id + '">' + category.name + '</option>';
                            });
                            $('select[name=category]').html(options);
                            form.render('select');
                        }
                    });
                }
            });
        });

        // 监听药品类别选择事件
        form.on('select(category)', function(data) {
            var categoryId = data.value;
            $.ajax({
                url: '/medicines?categoryId=' + categoryId, // 模拟接口，实际需要替换为后端接口
                type: 'GET',
                success: function(res) {
                    var options = '<option value="">请选择药品</option>';
                    res.data.forEach(function(medicine) {
                        options += '<option value="' + medicine.id + '">' + medicine.name + '</option>';
                    });
                    $('select[name=medicine]').html(options);
                    form.render('select');
                }
            });
        });

        // 监听添加明细表单提交
        form.on('submit(addDetail)', function(data) {
            var formData = data.field;
            // 验证采购数量
            if (formData.quantity <= 0) {
                layer.msg('采购数量必须大于0');
                return false;
            }
            // 提交表单
            $.ajax({
                url: '/addPurchaseDetail', // 模拟接口，实际需要替换为后端接口
                type: 'POST',
                data: formData,
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg('采购明细添加成功');
                        // 刷新表格
                        table.reload('purchaseDetailsTable');
                    } else {
                        layer.msg('采购明细添加失败');
                    }
                },
                error: function() {
                    layer.msg('请求失败，请重试');
                }
            });
            return false; // 阻止表单默认提交行为
        });
    });
</script>
</body>
</html>